<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>零基础HTML及CSS编码（二）</title>
		<link rel="stylesheet" type="text/css" href="./task1-5.css">
	</head>
	<body>
		<header>
			<h1><a href="#"><img src="img/baidu-logo.png" alt="标题"></a></h1>
			<nav>
				<div>
					<ul>
						<li><a href="#" target="_blank">链接一</a></li>
						<li><a href="#" target="_blank">链接二</a></li>
						<li><a href="#" target="_blank">链接三</a></li>
						<li><a href="#" target="_blank">链接四</a></li>
					</ul>
				</div>
			</nav>
		</header>
		<main>
		<article>
			<h2>文章一级标题</h2>
			<h3>文章二级标题</h3>
			<span class="auther">文章作者</span>
			<span class="atime">文章发表时间</span>
			<p>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了<br />这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了<br />这是一个很长很长的段落，这是一个很长很长的段落,<a href="#" target="_blank">新标签页打开网页</a>这是一个很长很长的段落，这是一个很长很长的段落，<strong>这里有个粗体字</strong>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落。</p>
			<img src="img/task_1_01.jpg" alt="面向大海" />
			<p>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，<strong>这里有个粗体字</strong>这是一个很长很长的段落，这是一个很长很长的段落，<a href="#" target="_blank">新标签页打开网页</a>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落。</p>
		</article>
		<article>
			<h2>文章一级标题</h2>
			<h3>文章二级标题</h3>
			<span class="auther">文章作者</span>
			<span class="atime">文章发表时间</span>
			<p>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了<br />这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了<br />这是一个很长很长的段落，这是一个很长很长的段落,<a href="#" target="_blank">新标签页打开网页</a>这是一个很长很长的段落，这是一个很长很长的段落，<strong>这里有个粗体字</strong>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落。</p>
			<img src="img/task_1_01.jpg" alt="面向大海" />
			<ul>
				<li>列表一</li>
				<li>列表一</li>
				<li>列表一</li>
				<li>列表一</li>
			</ul>
		</article>
		<article>
			<h2>图</h2>
			<dl>
				<dt>图</dt>
				<dd><span>拥抱大海</span><img src="img/task_1_01.jpg" alt="拥抱大海"></dd>
				<dd><span>拥抱大海</span><img src="img/task_1_01.jpg" alt="拥抱大海"></dd>
				<dd><span>拥抱大海</span><img src="img/task_1_01.jpg" alt="拥抱大海"></dd>
				<dd><span>拥抱大海</span><img src="img/task_1_01.jpg" alt="拥抱大海"></dd>
			</dl>
		</article>
		<article>
			<h2>文章一级标题</h2>
			<h3>文章二级标题</h3>
			<span class="auther">文章作者</span>
			<span class="atime">文章发表时间</span>
			<div>
				<ol>
					<li>排名一</li>
					<li>排名二</li>
					<li>排名三</li>
				</ol>
			</div>
			<p>表格</p>
			<table>
				<tr><th>表头</th><th>表头</th><th>表头</th></tr>
				<tr><td>表内容单元格</td><td>表内容单元格</td><td><a href="#">操作</a></td></tr>
				<tr><td>表内容单元格</td><td>表内容单元格</td><td><a href="#">操作</a></td></tr>
				<tr><td>表内容单元格</td><td>表内容单元格</td><td><a href="#">操作</a></td></tr>
				<tr><td>表内容单元格</td><td>表内容单元格</td><td><a href="#">操作</a></td></tr>
				<tr class="buttonTable"><td>总计</td><td colspan="2">1000</td><tr></tr>
			</table>
		</article>
		</main>
		<aside>
			<h4>这里是一个侧栏，这是侧栏的标题</h4>
			<!--<h3>侧栏注册窗口标题</h3>-->
			<form action="save.php" method="post">
				<div>
					<label class="tips">请输入邮箱地址</label>
					<input type="text" name="text" placeholder="邮箱">
					<p>请输入邮箱地址</p>
				</div>
				<div>
					<label class="tips">请输入密码</label>
					<input type="password" name="password" placeholder="密码">
					<p>请输入密码</p>
				</div>
				<div>
					<label class="tips">请重复输入密码</label>
					<input type="password" name="password" placeholder="请重复输入密码">
					<p>密码为6-16的英文数字</p>
				</div>
			</form>
			<form action="save.php" method="post">
				<div>
					<label class="tips">性别</label>
					<input type="radio" value="male" name="sex" checked="checked">
					<label>男</label>
					<input type="radio" value="female" name="sex">
					<label>女</label>
				</div>
			</form>
			<form action="save.php" method="post">
				<div>
					<label class="tips">城市</label>
					<select>
						<option value="北京" selected="selected">北京</option>
						<option value="上海">上海</option>
						<option value="广州">广州</option>
					</select>
				</div>
			</form>
			<form action="save.php" method="post">
				<div>
					<label class="tips">爱好</label>
					<input type="checkbox" value="sport" name="hobby">
					<label>运动</label>
					<input type="checkbox" value="art" name="hobby">
					<label>艺术</label>
					<input type="checkbox" value="science" name="hobby">
					<label>科学</label>
				</div>
			</form>
			<form action="save.php" method="post">
				<div>
					<label class="tips">个人描述</label>
					<textarea rows="2" cols="20">多行文本</textarea>
				</div>
			</form>
			<div class="submitButton">
				<input type="button" name="submitButton" value="确认提交">
			</div>
		</aside>
		<footer>
			<p><a href="#">版权所有@</a></p>
		</footer>
	</body>
</html>